<template>
	<view>
		<!-- 返回按钮 -->
		<view class="back-button" @click="navigateBackToHome">
			<text>返回首页</text>
		</view>
		<!-- 搜索框 start-->
		<view class="search-select">
			<uni-row class="demo-uni-row">
				<uni-col :span="6">
					<uni-data-select v-model="value" :localdata="range" @change="change"></uni-data-select>
				</uni-col>
				<uni-col :span="18">
					<uni-search-bar class="uni-mt-10" radius="100" placeholder="请输入关键词" clearButton="none"
						cancelButton="none" @confirm="search" />
				</uni-col>
			</uni-row>
		</view>
		<!-- 搜索框 start-->
		<!-- 咨询师 start -->
		<view class="counselor-list">
			<!-- <view class="counselor-list-title">
				<view class="counselor-list-title-tile">咨询师</view>
				<view class="counselor-list-title-statistics">共10个</view>
			</view> -->
			<view class="counselor-list-title-one">
				<view class="counselor-list-title-one-left">
					<view class="counselor-list-title-one-left-img">
						<image class="counselor-list-title-one-left-img-img" src="/static/consultant/teacher.png"
							mode=""></image>
						<view class="counselor-list-title-one-left-annual">
							<view class="counselor-list-title-one-left-annual-inc">
								<image class="counselor-list-title-one-left-annual-inc-img"
									src="/static/consultant/check-mark.png" mode="widthFix"></image>
							</view>
							<view class="counselor-list-title-one-left-annual-title">
								2025年审
							</view>
						</view>

					</view>
				</view>
				<view class="counselor-list-title-one-right">
					<view class="counselor-list-title-one-right-top">
						<view class="counselor-list-title-one-right-top-name">
							王茉莉
						</view>
						<view class="counselor-list-title-one-right-top-method">
							面对面/视频
						</view>
						<view class="counselor-list-title-one-right-top-position">
							<view class="counselor-list-title-one-right-top-position-icn">
								<image class="counselor-list-title-one-right-top-position-icn-img"
									src="/static/consultant/position.png" mode=""></image>
							</view>

							<view class="counselor-list-title-one-right-top-position-name">
								北京.北京市
							</view>
						</view>
					</view>
					<view class="counselor-list-title-one-right-center">
						<view class="counselor-list-title-one-right-center-title">
							国家二级心理咨询师
						</view>
						<view class="counselor-list-title-one-right-center-title">
							心理学博士在读
						</view>
						<view class="counselor-list-title-one-right-center-title">
							自体心理学取向资深心理咨询师
						</view>
						<view class="counselor-list-title-one-right-center-title">
							上海心理学会心理咨询师专业会员
						</view>
					</view>
					<view class="counselor-list-title-one-right-down">
						<view class="counselor-list-title-one-right-down-price">
							<text class="price-icon">￥</text>100元/ <text class="price-icon">每小时</text>
						</view>
						<view class="counselor-list-title-one-right-down-button">
							立即预约
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 咨询师 end-->
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			// 返回首页功能
			navigateBackToHome() {
				uni.switchTab({
					url: '/pages/home/home'
				})
			}

		}
	}
</script>

<style>
	/* 返回按钮样式 */
	.back-button {
		padding: 15rpx 30rpx;
		background-color: #A16222;
		color: #fff;
		text-align: center;
		border-radius: 25rpx;
		margin: 20rpx auto;
		width: 200rpx;
	}
	
	.search-select {
		height: 110rpx;
		background-color: #fff;
	}

	.uni-select {
		min-height: 55px !important;
		border: 0px solid #fff !important;
	}

	/* 咨询师列表 start */
	.counselor-list {
		width: 720rpx;
		background-color: #fff;
		margin: 5rpx auto 5rpx;
		border-radius: 25rpx;
		overflow: hidden;
		box-sizing: border-box;
		padding: 25rpx 15rpx;
	}

	/* .counselor-list-title {
		display: flex;
		justify-content: space-between;
		padding: 0rpx 20rpx;
		margin: 0rpx 0rpx 45rpx;
	}

	.counselor-list-title-tile {
		font-size: 45rpx;
		font-weight: 600;
	}

	.counselor-list-title-statistics {
		font-size: 30rpx;
		color: #9A9A9A;
	} */

	.counselor-list-title-one {
		border-radius: 35rpx;
		border: 1px solid #9A9A9A;
		display: flex;
		justify-content: flex-start;
		padding: 15rpx;
	}

	.counselor-list-title-one-left {
		width: 155rpx;
		height: 295rpx;
		background-color: #F4CE98;
		opacity: 0.25rpx;
		border-radius: 25rpx;
		overflow: hidden;
	}

	.counselor-list-title-one-left-img {
		width: 155rpx;
		height: 195rpx;
	}

	.counselor-list-title-one-left-img-img {
		width: 155rpx;
		height: 195rpx;
		border-radius: 25rpx 25rpx 0rpx 0rpx;
	}

	.counselor-list-title-one-left-annual {
		display: flex;
		justify-content: space-between;
		padding: 0rpx 10rpx;
	}

	.counselor-list-title-one-left-annual-inc {
		width: 30rpx;
		height: 30rpx;
		margin: 5rpx;
	}

	.counselor-list-title-one-left-annual-inc-img {
		width: 30rpx;
		height: 30rpx;
	}

	.counselor-list-title-one-left-annual-title {
		font-size: 31rpx;
		color: #9B7D31;
		font-weight: 600;
	}

	.counselor-list-title-one-right {
		width: 510rpx;
		padding: 0rpx 0rpx 0rpx 20rpx;
	}

	.counselor-list-title-one-right-top {
		height: 50rpx;
		display: flex;
		justify-content: space-between;
	}

	.counselor-list-title-one-right-top-name {
		font-size: 40rpx;
		font-weight: 600;
	}

	.counselor-list-title-one-right-top-method {
		font-size: 20rpx;
		color: #9A9A9A;
		padding: 20rpx 5rpx 5rpx;
		width: 150rpx;
	}

	.counselor-list-title-one-right-top-position {
		display: flex;
		padding: 10rpx 0rpx 0rpx;
	}

	.counselor-list-title-one-right-top-position-icn {
		width: 25rpx;
		height: 25rpx;
	}

	.counselor-list-title-one-right-top-position-icn-img {
		width: 25rpx;
		height: 25rpx;
	}

	.counselor-list-title-one-right-top-position-name {
		font-size: 25rpx;
		color: #9A9A9A;
	}

	.counselor-list-title-one-right-center-title {
		font-size: 25rpx;
		padding: 5rpx 0rpx;
	}

	.counselor-list-title-one-right-down {
		display: flex;
		justify-content: flex-end;
		padding: 10rpx 0rpx 5rpx;
	}

	.counselor-list-title-one-right-down-price {
		font-size: 30rpx;
		color: #A16222;
		font-weight: 600;
		padding: 13rpx 15rpx 0rpx;
	}

	.price-icon {
		font-size: 20rpx;
		padding: 10rpx 0rpx 0rpx;
	}

	.counselor-list-title-one-right-down-button {
		padding: 15rpx 25rpx;
		background-color: #A16222;
		color: #fff;
		border-radius: 30rpx;
		margin-left: 15rpx;

	}

	/* 咨询师列表 end */
</style>